<!-- 添加/修改应用菜单-->
<template>
	<div class="app-container">
		<el-dialog
		  :title="ruleForm.app_id ? '修改应用菜单' : '添加应用菜单'"
		  :visible.sync="dialogVisible"
		  width="800px"
		  :before-close="handleClose">
		  <div class="el-dialog-view">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="菜单名词" prop="app_name">
					<el-input v-model="ruleForm.app_name" placeholder="请输入应用名词" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="菜单地址" prop="app_url">
					<el-input v-model="ruleForm.app_url" placeholder="请输入应用地址" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="app_desc">
					<el-input v-model="ruleForm.app_desc" type="textarea"  :rows="3" placeholder="请输入描述" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="排序" >
					<el-input v-model="ruleForm.app_sort" type="number" placeholder="请输入排序" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-switch
					  v-model="ruleForm.state"
					  active-text="正常"
					  inactive-text="禁用">
					</el-switch>
				</el-form-item>
			</el-form>
		  </div>
		    <span slot="footer" class="dialog-footer">
		      <el-button @click="handleClose()">返 回</el-button>
		      <el-button type="primary" @click="save()">保 存</el-button>
		    </span>
		</el-dialog>
	</div>
</template>

<script>
import Api from '@/api/pages/application-center/index.js';
import { hhObj, hhFile, hhFolder } from 'hhframe-web'
import { getToken } from '@/api/qiniu'
export default {
	name: 'entrance-guard_use-user-add-rel',
	props:{
		"item":Object
	},
	data() {
		return {
			dialogVisible: true,
			formInline: {},
			tableData: [],
			ruleForm: {
				id:'',
				pid:0,
				app_id:'',
				app_code:'',
				app_desc:'',
				app_url:'',//应用地址
				app_sort:1,//排序
				state:true,//状态
				app_name:'',//
			},
			rules: {
				app_name: [{ required: true, message: '不能为空', trigger: 'blur' }],
				app_url: [{ required: true, message: '不能为空', trigger: 'blur' }],
				app_desc: [{ required: true, message: '不能为空', trigger: 'blur' }],
			},
			appCodeList:'',
		};
	},
	beforeDestroy() {
	
	},
	created() {
		if(this.item) {
			this.ruleForm =JSON.parse(JSON.stringify(this.item));
			if(this.item.state == 2) {
				this.ruleForm.state = false;
			}else{
				this.ruleForm.state = true;
			}
		}
	},
	mounted() {
	},
	methods: {
		handleClose(state = false) {
			this.$emit('close',state);
		},
		save() {
			this.$refs['ruleForm'].validate((valid) => {
			  if (valid) {
				  let data = {};
				  data['id'] = this.ruleForm.id || '';
				  data['app_id'] = this.ruleForm.app_id;
				  data['pid'] = this.ruleForm.pid;
				  data['app_desc'] = this.ruleForm.app_desc;
				  data['app_url'] = this.ruleForm.app_url;
				  data['app_sort'] = this.ruleForm.app_sort;
				  data['state'] = this.ruleForm.state ? 1 : 2;
				  data['app_name'] = this.ruleForm.app_name;
				  console.log(data)
				  Api.saveAppRel(data).then(res => {
				  	if(res.state) {
						this.$message({
						  message: '保存成功',
						  type: 'success'
						});
						this.handleClose(true)
					}else{
						this.$message.error(res.msg);
					}
				  })
			  } else {
				return false;
			  }
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
}
 .el-dialog-view{
	  // height: calc(100vh - 300px);
	  // overflow-y: auto;
	  // padding: 10px;
	  // border: 1px solid #f5f5f5;
  }
</style>

<style lang="scss">
.dialogVideo {
	.el-dialog__body {
		padding: 20px;
	}
}
.avatar-uploader  {
	width: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

</style>
